<template>
  <div class="rootscroll">
    <div>
      <slot></slot>
    </div>
  </div>
</template>
<script>
import Bscroll from "better-scroll";

export default {
  data() {
    return {
      scroll: null,
    };
  },
  mounted() {
    this.scroll = new Bscroll(".rootscroll", {
      // 其实在这里的observeDOM，observeImage，click，mouseWheel，pullUpLoad都是插件，只不过这些插件都被包裹在"better-scroll"中，不需要另外下载，当值为true是，则开启次插件。
      observeDOM: true,
      // observeDOM: true,开启对 content 以及 content 子元素 DOM 改变的探测。当插件被使用后，当这些 DOM 元素发生变化时，将会触发 scroll 的 refresh 方法(则可以滚动)
      observeImage: true,
      // observeImage: true,开启对 wrapper 子元素中图片元素的加载的探测。无论图片的加载成功与否，都会自动调用 BetterScroll 的 refresh 方法来重新计算可滚动的宽度或者高度（默认是每过100ms调用一次，如果要设置时间，则加个debounceTime：时间。）
      click: true,
      //   click: true,可以监听到scroll范围的点击事件
      mouseWheel: true,
      //   mouseWheel: true,可以使用鼠标滑轮控制滚动条
      probeType: 3,
      //   probeType: 3,可以监听滚动条滚动的位置。但是一般这里的3不能写死，要在props中声明变量，从要使用这个组件的地方传过来是3/2/1、0,再probeType：props中变量
      pullUpLoad: true,
      //   pullUpLoad: true,可以上拉加载更多。但是一般这里的true不能写死，要在props中声明变量，从要使用这个组件的地方传过来是true/false,再pullUpLoad：props中变量
    });
    // console.log(this.scroll);
    this.scroll.on("scroll", (position) => {
      // 这行代码是配合probeType: 3,使用的。监听滚动条滚动的位置

      //   console.log(position);
      this.$emit("positionshow", position);
    });
    this.scroll.on("pullingUp", () => {
      // 这行代码是配合pullUpLoad: true使用的，上拉加载更多（这里的上拉只能拉一次，需要配合finishPullUp()使用，才能上拉多次。这个方法在home.vue中使用了）

      //   console.log("给我拉");
      //   因为上面不需要传参，所以下面可以之间传个自定义事件就行了
      //   这个上拉加载更多需要传到父组件home.vue中，因为home.vue中已经包装了请求数据的函数
      this.$emit("pullingUp1");
    });
  },
};
</script>